<template>
	<view class="role-content">
		<view class="role-title-row">
			<img src="@/static/img/selectRole/title-left.png" alt="" style="width: 91rpx;height: 5rpx;">
			<span class="role-title">请选择注册角色</span>
			<img src="@/static/img/selectRole/title-right.png" alt="" style="width: 91rpx;height: 5rpx;">
		</view>
		<view class="select-role">
			<view class="select-role-student" @tap="selectHandle('0')">
				<span class="role-student-ch">我是学生</span>
				<span calss="role-student-en">student</span>
			</view>
			<view class="select-role-teacher" @tap="selectHandle('1')">
				<span class="role-student-ch">我是老师</span>
				<span class="role-teacher-en">teacher</span>
			</view>
			<view class="select-role-society" @tap="selectHandle('2')">
				<span class="role-society-ch">社会人员</span>
				<span class="role-society-en">society</span>
			</view>
		</view>
		<view class="down-load">
			<span>如果您是专家,请</span>
			<span class="experts-load" @tap="downloadHandle">下载运动健康专家版</span>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userType: '',
			}
		},
		methods:{
			//选择角色
			selectHandle(type){
				this.userType = type;
				let role = '';
				console.log(role);
				type === '0' ? role = 'student' : role='';
				type === '1' ? role = 'teacher' : role='';
				type === '2' ? role = 'society' : role='';
				uni.setStorageSync('userType', this.userType)
				console.log('this.userTypeppp', this.userType)
				if(type==="2") {
					uni.navigateTo({
						url:'/pages/person/personalInformation'
					})
				} else {
					uni.navigateTo({
						url:'/pages/person/studentId'
					})
				}
			},
			//下载专家版
			downloadHandle(){
				console.log(111);
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.role-content{
		overflow: hidden;
		background-color: #fff;
		min-height: 100vh;
		.role-title-row{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 178rpx;
			.role-title{
				font-size: 46rpx;
				font-weight: bold;
				color: #333333;
				margin: 0rpx 12rpx;
			}
		}
		.select-role{
			margin-top: 41rpx;
			.select-role-student,.select-role-teacher,.select-role-society{
				width: 699rpx;
				height: 269rpx;
				background-size: 100%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				padding: 109rpx 0rpx 0rpx 79rpx;
				.role-student-ch,.role-student-ch,.role-society-ch{
					font-size: 40rpx;
					font-weight: bold;
				}
				.role-student-en,.role-student-en,.role-society-en{
					font-size: 30rpx;
				}
			}
			.select-role-student{
				background-image: url(../../static/img/selectRole/student.png);
				color: #2382FF;
			}
			.select-role-teacher{
				background-image: url(../../static/img/selectRole/teacher.png);
				color: #F35E5C;
			}
			.select-role-society{
				background-image: url(../../static/img/selectRole/social-workers.png);
				color: #F58547;
			}
		}
		.down-load{
			width: 100%;
			text-align: center;
			font-size: 22rpx;
			color: #666666;
			position: absolute;
			bottom: 80rpx;
			.experts-load{
				color: #0066FF;
			}
		}
	}
</style>